<template>
    <div class="manage">
        <div class="main">
            <el-container>
                <el-header style="color: green;height: 70px;line-height: 70px;">
                    <span>宠物商店管理后台</span>
                    <span @click="exit()" style="float: right;cursor:pointer;">退出</span>
                </el-header>
                <div class="hr">
                <el-divider style="height: 5px;margin: 0px;"></el-divider>
                </div>
                <el-container>
                <el-aside width="200px">
                    <el-menu
                            default-active="2"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            @select="handleSelect">
                        <el-menu-item index="2">
                            <i class="el-icon-menu"></i>
                            <span slot="title">订单信息列表</span>
                        </el-menu-item>
                        <el-menu-item index="3">
                            <i class="el-icon-document"></i>
                            <span slot="title">用户信息列表</span>
                        </el-menu-item>
                        <el-menu-item index="4">
                            <i class="el-icon-setting"></i>
                            <span slot="title">商品管理</span>
                        </el-menu-item>
                    </el-menu>
                </el-aside>
                    <el-main>
                        <router-view></router-view>
                    </el-main>
                </el-container>
            </el-container>
        </div>
    </div>
</template>

<script>
    import Cookie from 'js-cookie'
    export default {
        name: "manage",
        methods: {
            handleSelect(key, keypath) {
                if (key == 2) {
                    this.$router.push("/manageOrder")
                } else if (key == 3) {
                    this.$router.push("/userList")
                } else if (key==4){
                    this.$router.push("/goodsList")
                }
            },
            handleOpen(key, keyPath) {
                console.log(key)

            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },
            exit(){
                Cookie.remove("token")
                console.log("tuihcu ")
                this.$router.push("/loginManage")
            }
        },
        created() {
            this.handleSelect(2,"")
        }
    }
</script>

<style scoped>
    .manage {
        width: 100%;
        background-color: lightgray;
    }

    .main {
        background-color: white;
        margin: 0px auto;
        width: 80%;
    }
    .el-menu{
        height: 100vh;
    }
   .hr> .el-divider--horizontal{
        margin: 0px;
    }
</style>